<script lang="ts" setup>
import { ref, reactive,computed } from 'vue';
import { useUserStore } from '#/store/user'
import { useVbenModal, VbenButton } from '@vben/common-ui';


import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
const [Modal, modalApi] = useVbenModal({
    onCancel() {
    modalApi.close();
  },
  onConfirm() {
    message.info('onConfirm');
 
    // modalApi.close();
  },
});
// 使用 Pinia store
const userStore = useUserStore()
// 可以直接使用 store 中的方法
const handleIncrementAge = (index: number) => {
  userStore.incrementAge(index)
}
const userId = computed(() => userStore.userId);
// 添加新用户示例
const newUser = {
  name: 'lisi',
  age: 22
}
// 基本类型数据
const test = ref<string>('test');
const num = ref<number>(1);
const array = ref<number[]>([1, 2, 3, 4]);

// 类型定义和复杂数据
interface User {
  name: string;
  age: number;
  email?: string;
  id?: string;
}
const users = reactive<User[]>([
  { name: 'zhangsan', age: 18 },
  { name: 'wangliu', age: 20 }
]);
// 编辑表单
const form = reactive<User>({
  id: '1',
  name: '牛马',
  age: 19,
  email: '111111@qq.com'
})
const open = ref<boolean>(false);

// 方法
const addNum = (): void => {
  num.value += 1;
};
const subNum = (): void => {
  num.value -= 1;
};

const incrementAge = (index: number): void => {
  users[index].age += 1;
};
const editUser = (user):void=>{
  // form.id = user.id
  // form.name = user.name
  // form.age = user.age
  // form.email = user.email
  //   baseFormApi.setValues({
  // form.id = user.id,
  // form.name = user.name,
  // form.age = user.age,
  // form.email = user.email
  // });

  // 设置单个表单值
  // baseFormApi.setFieldValue('checkbox', true);
    modalApi.open()
    handleSetFormValue(user)
    userStore.editUserId(user.id)
  //   form.id = user.id
  // form.name = user.name
  // form.age = user.age
  // form.email = user.email
console.log(user,form)
  
}
const handleSetFormValue = (user:User) => {
  baseFormApi.setValues({
    name: user.name,
    age: user.age,
    email: user.email,
    id: user.id,
  });
};
const showModal = () => {
  open.value = true;
};
// 编辑完成
const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};
const [BaseForm,baseFormApi] = useVbenForm({
  // 所有表单项共用，可单独在表单内覆盖
  commonConfig: {
    // 所有表单项
    componentProps: {
      class: 'w-full',
    },
  },
  // 提交函数
  handleSubmit: onSubmit,
    handleValuesChange(_values, fieldsChanged) {
    message.info(`表单以下字段发生变化：${fieldsChanged.join('，')}`);
  },
  // 垂直布局，label和input在不同行，值为vertical
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  
  schema: [
    {
      // 组件需要在 #/adapter.ts内注册，并加上类型
      component: 'Input',
      // 对应组件的参数
      componentProps: {
        placeholder: '请输入用户名',
      },
      // 字段名
      fieldName: 'name',
      // 界面显示的label
      label: '姓名',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'age',
      label: '年龄',
    },
        {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'email',
      label: '邮箱',
    },
    // {
    //    component: 'Input',
    //   componentProps: {
    //     placeholder: '请输入',
    //   },
    //   fieldName: 'id',
    //   label: 'id',
    //    dependencies: {
    //     if(values) {
    //       return !values.id;
    //     },
    //     // 只有指定的字段改变时，才会触发
    //     // triggerFields: [],
    //   },
    // },
    

  ],
  wrapperClass: 'grid-cols-1',
  // 确定按钮不显示
  showDefaultActions: false,

});

function onSubmit(values: Record<string, any>) {
  console.log(JSON.stringify(values));
  const updatedUser:User = {
    name: values.name,
    age: values.age,
    email: values.email
  }
userStore.editUsers(updatedUser)

  message.success({
    content: `form values: ${JSON.stringify(values)}`,
  });
  modalApi.close();
}


</script>

<template>
  <div class="container">
    <div>
            <!-- <VbenButton @click="() => modalApi.open()">Open</VbenButton> -->
    <Modal class="w-[600px]" title="用户编辑"> <BaseForm /></Modal>
    </div>

    <h1>{{ test }}</h1>
    
    <div class="section">
      <button @click="addNum">增加数字 (当前: {{ num }})</button>
      <button @click="subNum">减去数字 (当前: {{ num }})</button>
    </div>
    
    <div class="section">
      <h2>数字数组</h2>
      <ul>
        <li v-for="(item, index) in array" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
    
    <div class="section">
      <h2>用户列表</h2>
      <ul class="user-list">
        <li v-for="(user, index) in users" :key="index">
          <span class="user-name">{{ user.name }}</span>
          <span class="user-age" @click="incrementAge(index)">
            年龄: {{ user.age }} (点击+1)
          </span>
        </li>
      </ul>
    </div>
     <div class="section">
       <h3>用户列表 (来自 Pinia)</h3>
    <ul class="user-list">
      <li v-for="(user, index) in userStore.users" :key="index">
       <span class="user-name">{{ user.name }} ----  <span  @click = editUser(user)>编辑</span>  </span>  
        <span  class="user-age" @click="handleIncrementAge(index)">
          年龄: {{ user.age }} (点击+1)------------- {{userId}}
        </span>
      </li>
    </ul>
  </div>
    <button @click="userStore.addUser(newUser)">
      添加新用户
    </button>

 <div class="section">
    <h4>成年用户 (computed):</h4>
    <ul class="user-list">
      <li v-for="(user, index) in userStore.adultUsers" :key="index">
       <span class="user-name" >{{ user.name }} </span>  
        ({{ user.age }}岁)
      </li>
    </ul>
    </div>
    <div class="section">
    <h4>未成年用户 (computed):</h4>
    <ul class="user-list">
      <li v-for="(user, index) in userStore.underUsers" :key="index">
       <span class="user-name">{{ user.name }}</span>  
        ({{ user.age }}岁)
      </li>
    </ul>
    </div>
  </div>
  <!-- </div> -->
</template>

<style scoped>
.container {
  max-width: 600px;
  padding: 20px;
  margin: 0 auto;
}

.section {
  padding: 15px;
  margin-bottom: 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
}

h1, h2 {
  color: #333;
}

button {
  padding: 8px 16px;
  color: white;
  cursor: pointer;
  background-color: #42b983;
  border: none;
  border-radius: 4px;
}

button:hover {
  background-color: #3aa876;
}

.user-list {
  padding: 0;
  list-style: none;
}

.user-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #ccc;
}

.user-age {
  font-weight: bold;
  color: #42b983;
  cursor: pointer;
}

.user-age:hover {
  text-decoration: underline;
}
</style>
